<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
		*{padding:0;margin:0;}
		.container{width:400px;height:200px;margin:0 auto;}
	</style>
</head>
<body>
	<div class="container">
		
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js"></script>
	<script src="../../src/canvas-keyframes.js"></script>
	<script>
		// 初始化vConsole
		window.vConsole = new window.VConsole();
		console.info('欢迎使用 vConsole。可用于展示 console 日志，方便开发、调试。');
		
		var keyFrames;
		function keyFrames(img){
			keyFrames = new CanvasKeyFrames(document.querySelector('.container'), 'sprite', img, {
				fps:20,
				width:300,
				height:150,
                _iw: 600,
                _ih: 300,
                framesCount: 25
			});
			keyFrames.play();
		}

		(function(){
			var img = new Image();
			img.onload = function(){
				img.onload = null;
				keyFrames(img);
			}
			img.onerror = function(){
			}
			img.src = 'img/2.png';
		})();
		
	</script>
</body>
</html>